<template>
  <div>
    <!-- 最顶端部分 -->
    <v-header title="购物车" :back="true"></v-header>
    <div id="box">
      <!-- 导航部分 -->
      <nav>
        <a href="#" class="a1">全部(20)<span></span></a>
        <a href="#">降价(4)</a>
        <a href="#">常卖(2)</a>
        <a href="#">分类</a>
      </nav>
      <div id="center1">
        <!-- 内容部分 -->
        <div class="neirong">
          <!-- 标题部分 -->
          <div class="biaoti">
            <img src="images/gouwuche1.jpg" />
            <h2>小U自营</h2>
            <p class="p3">领劵</p>
            <p class="p2">|</p>
            <p class="p1">已免运费</p>
          </div>
          <!-- 商品部分 -->
          <div class="shangpin">
            <ul>
              <li
                class="clearfix"
                v-for="(item, index) in goods"
                :key="item.id"
              >
                <div class="left1">
                  <img
                    :src="
                      item.checked
                        ? require('../../assets/images/gouwuche2.jpg')
                        : require('../../assets/images/gouwuche1.jpg')
                    "
                    alt=""
                    @click="changOne(index)"
                  />
                </div>
                <div class="right1">
                  <img :src="'http://localhost:3000' + item.img" />
                  <p class="p1">{{ item.goodsname }}</p>
                  <p class="p2">
                    敏感肌控油，祛痘去写、男女可用、泡沫绵密、净透毛孔
                  </p>
                  <span class="iconfont p3">粉色 50ML &#xe601;</span>
                  <p class="p4">比下降时降低￥100</p>
                  <div>
                    <p class="p5">
                      <span>￥</span><em>{{ item.price * item.num }}</em
                      ><del>￥1099</del>
                    </p>
                    <p class="p6">
                      <span class="span0" @click="add(index)"></span
                      ><span></span><i>{{ item.num }}</i
                      ><em @click="jian(index)"></em>
                    </p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <!-- 合计部分 -->
        <div id="heji">
          <input
            type="checkbox"
            class="in2"
            v-model="allChecked"
            @click="changAll"
          />
          <span>全选</span>
          <div class="d1">
            <p class="p1">合计</p>
            <p class="p2">已免运费</p>
          </div>
          <div class="d2">
            <p class="p1">￥{{ allPrice }}</p>
            <p class="p2">已优惠￥200元</p>
          </div>
          <i @click="jiesuan">结算({{ price }})</i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
// let shops = [
//   {
//     id: 1,
//     name: "手机",
//     price: 1222,
//     num: 1,
//     img: "https://p0.ssl.qhimgs1.com/t01eb8ee27981d78cbe.jpg",
//   },
// ];
export default {
  mounted() {
    // shops.forEach(function(item){
    //   item.checked=0
    // })
    // this.goods=shops
    axios({
      url: "/api/cartlist",
      method: "get",
      params: {
        uid: JSON.parse(localStorage.getItem("userInfo")).uid,
      },
      headers: {
        authorization: JSON.parse(localStorage.getItem("userInfo")).token,
      },
    }).then((res) => {
      let list = res.data.list ? res.data.list : [];
      list.forEach((item) => {
        item.checked = false;
      });
      // console.log(res);
      this.goods = list;
      // console.log(this.goods);
    });
  },
  data() {
    return {
      goods: [],
      allChecked: false,
    };
  },
    //总价计算
  computed: {
    allPrice() {
      let sum = 0;
      this.goods.forEach((item) => {
        if (item.checked) {
          sum += item.price * item.num;
        }
      });
      return sum;
    },
    price() {
      let sum = 0;
      this.goods.forEach((item) => {
        if (item.checked) {
          sum += item.num;
        }
      });
      return sum;
    },
  },
  methods: {
    jiesuan() {
      if (!this.goods.some((item) => item.checked)) {
        alert("请选择购物车");
        return;
      }
      //存总价、总数量、选中的购物车的id拼接成的字符串
      let orderInfo={
        countmoney:this.allPrice,
        countnumber:this.goods.reduce((val,item)=>item.checked?val+=item.num:val,0),
        idstr:this.goods.reduce((val,item)=>item.checked?val+=','+item.id:val,'').slice(1),
      }
      localStorage.setItem("orderInfo",JSON.stringify(orderInfo))
      console.log(orderInfo);
      this.$router.push("/qrdd");
    },
    add(index) {
      this.goods[index].num++;
      // this.goods[index].num=Math.min( this.goods[index].num,3)
    },
    jian(index) {
      this.goods[index].num--;
      this.goods[index].num = Math.max(this.goods[index].num, 1);
    },
    //全选
    changAll() {
      this.goods.forEach((item) => {
        item.checked = !this.allChecked;
      });
    },
    //单选
    changOne(index) {
      this.goods[index].checked = this.goods[index].checked ? 0 : 1;
      this.allChecked = this.goods.every((item) => item.checked);
    },
  },
};
</script>

<style scoped>
/* 导航部分*/
.goods-card {
  margin: 0;
  background-color: #fff;
}
.delete-button {
  height: 100%;
}
nav {
  background-image: linear-gradient(#ff6040, #ff8273);
  font-size: 0.26rem;
  display: flex;
  height: 0.62rem;
  line-height: 0.62rem;
  justify-content: space-around;
}
nav a {
  color: #fff;
  font-size: 0.26rem;
}
nav a.a1 {
  font-size: 0.3rem;
  font-weight: bold;
  position: relative;
}
nav a.a1 span {
  width: 0.4rem;
  height: 0.04rem;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0.3rem;
}
#center1 {
  flex: 1;
  overflow: auto;
}
/*内容部分*/
.neirong {
  margin-bottom: 0.4rem;
}
.neirong .biaoti {
  height: 0.72rem;
  margin-bottom: 0.2rem;
  background: #fff;
  padding: 0 0.2rem;
  box-sizing: border-box;
}
.neirong .biaoti img {
  width: 0.32rem;
  height: 0.32rem;
  float: left;
  margin-top: 0.2rem;
}
.neirong .biaoti p {
  line-height: 0.72rem;
  float: right;
}
.neirong .biaoti h2 {
  line-height: 0.72rem;
  float: left;
  font-weight: bold;
  margin-left: 0.2rem;
}
.neirong .biaoti .p1 {
  font-size: 0.24rem;
  color: #333;
}
.neirong .biaoti .p2 {
  margin: 0 0.2rem;
}
.neirong .biaoti .p3 {
  font-size: 0.24rem;
  color: #ff6040;
}
.neirong .shangpin {
  background: #fff;
}
.neirong .shangpin li {
  padding: 0.2rem 0.23rem 0.3rem 0.2rem;
}
.neirong .shangpin .left1 {
  float: left;
  width: 0.32rem;
}
.neirong .shangpin .left1 .in1 {
  margin-top: 1rem;
}
.neirong .shangpin .left1 img {
  width: 0.32rem;
  height: 0.32rem;
  float: left;
  margin-top: 0.9rem;
}
.neirong .shangpin .center1 {
  margin: 0 0.2rem;
  width: 2.16rem;
  float: left;
}
.neirong .shangpin .right1 {
  float: left;
}
.neirong .shangpin .right1 img {
  width: 2.16rem;
  height: 2.16rem;
  float: left;
  margin-right: 0.4rem;
  margin-left: 0.2rem;
}
.neirong .shangpin .right1 .p1 {
  width: 3.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.3rem;
  color: #333;
}
.neirong .shangpin .right1 .p2 {
  width: 3.98rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.26rem;
  color: #a0a0a0;
  margin-bottom: 0.25rem;
}
.neirong .shangpin .right1 .p3 {
  background: #f2f2f2;
  color: #333;
  font-size: 0.2rem;
  padding: 0.08rem;
}
.neirong .shangpin .right1 .p3 .iconfont {
  transform: rotate(90deg);
}
.neirong .shangpin .right1 .p4 {
  font-size: 0.18rem;
  color: #ff6f52;
  margin-top: 0.15rem;
}
.neirong .shangpin .right1 .p5 {
  float: left;
}
.neirong .shangpin .right1 .p5 span {
  font-size: 0.16rem;
  color: #ff6040;
}
.neirong .shangpin .right1 .p5 em {
  font-size: 0.3rem;
  color: #ff6040;
  font-weight: bold;
}
.neirong .shangpin .right1 .p5 del {
  font-size: 0.16rem;
  color: #999;
  margin-left: 0.1rem;
}
.neirong .shangpin .right1 .p6 {
  float: right;
  position: relative;
}
.neirong .shangpin .right1 .p6 em {
  float: right;
  width: 0.28rem;
  height: 0.04rem;
  background: #333;
  margin-top: 0.2rem;
}
.neirong .shangpin .right1 .p6 i {
  float: right;
  color: #333;
  width: 0.8rem;
  height: 0.4rem;
  background: #f2f2f2;
  margin: 0 0.1rem;
  line-height: 0.4rem;
  text-align: center;
  font-size: 0.2rem;
}
.neirong .shangpin .right1 .p6 span {
  float: right;
  color: #333;
  width: 0.28rem;
  height: 0.04rem;
  background: #333;
  margin-top: 0.2rem;
}
.neirong .shangpin .right1 .p6 .span0 {
  transform: rotate(90deg);
  position: absolute;
  right: 0;
}
/*合计部分 */
#heji {
  height: 0.98rem;
  background: #fff;
  padding-left: 0.2rem;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  position: fixed;
  bottom: 0.9rem;
  width: 100vw;
}
#heji img {
  float: left;
  width: 0.32rem;
  height: 0.32rem;
  margin-top: 0.3rem;
}
#heji .in2 {
  float: left;
  margin-top: 0.35rem;
}
#heji span {
  float: left;
  line-height: 0.98rem;
  margin-left: 0.2rem;
  margin-right: 0.9rem;
  font-size: 0.3rem;
  color: #333;
  font-weight: bold;
}
#heji .d1 {
  float: left;
  margin-top: 0.1rem;
  margin-right: 0.1rem;
  width: 1.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#heji .d1 .p1 {
  font-weight: bold;
  font-size: 0.3rem;
}
#heji .d1 .p2 {
  font-size: 0.2rem;
  color: #a3a3a3;
}
#heji .d2 {
  float: left;
  margin-top: 0.1rem;
  width: 1.6rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#heji .d2 .p1 {
  font-size: 0.3rem;
  color: #ff6040;
}
#heji .d2 .p2 {
  font-size: 0.2rem;
  color: #a3a3a3;
}
#heji i {
  float: right;
  width: 2.2rem;
  height: 0.98rem;
  background: #ff6040;
  color: #fff;
  font-size: 0.32rem;
  line-height: 0.98rem;
  text-align: center;
}
</style>